<template>
    <div class="detail-container">
        <div class="page-header">
            <div class="header-left">
                <router-link to="/main/biao" class="back-btn">
                    <i class="el-icon-arrow-left"></i> 返回
                </router-link>
            </div>
            <div class="header-content">
                <h2 class="title">公司规章制度培训签到表</h2>
                <span class="subtitle">Company Rules and Regulations Training Sign-in Sheet</span>
            </div>
            <div class="header-right">
                <template v-if="!isView">
                    <el-button-group class="action-group">
                        <el-button type="primary" size="medium" icon="el-icon-plus" @click="addEmployee">新增人员</el-button>
                        <el-button type="danger" size="medium" icon="el-icon-delete" @click="deleteSelected">删除选中</el-button>
                        <el-button type="success" size="medium" icon="el-icon-check" @click="saveData">保存</el-button>
                        <el-button type="info" size="medium" icon="el-icon-menu" @click="goToList">列表</el-button>
                    </el-button-group>
                </template>
            </div>
        </div>

        <div class="content">
            <el-card class="info-card" :body-style="{ padding: '24px' }">
                <div class="info-section">
                    <div class="info-row">
                        <div class="info-item">
                            <span class="label">培训主题：</span>
                            <span class="value highlight">公司规章制度培训</span>
                        </div>
                        <div class="info-item">
                            <span class="label">培训时间：</span>
                            <el-date-picker
                                v-model="trainingTime"
                                type="datetime"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :disabled="isView"
                                placeholder="选择培训时间"
                                class="custom-date-picker">
                            </el-date-picker>
                        </div>
                        <div class="info-item">
                            <span class="label">培训地点：</span>
                            <el-input
                                v-model="trainingLocation"
                                :disabled="isView"
                                class="custom-input"
                                placeholder="请输入培训地点">
                            </el-input>
                        </div>
                    </div>
                </div>
            </el-card>

            <el-card class="table-card" :body-style="{ padding: '0' }">
                <div slot="header" class="card-header">
                    <span class="header-title">签到人员信息</span><br>
                    <span class="header-subtitle">Attendee Information</span>
                </div>
                <el-table
                    :data="employees"
                    border
                    stripe
                    style="width: 100%"
                    :header-cell-style="{background:'#f8f9fa', color: '#606266', fontWeight: '600'}"
                    :cell-style="{padding: '12px 0'}"
                    @selection-change="handleSelectionChange">
                    <el-table-column v-if="!isView" type="selection" width="55" align="center">
                    </el-table-column>
                    <el-table-column label="序号" type="index" width="80" align="center">
                    </el-table-column>
                    <el-table-column label="姓名" prop="name" align="center" min-width="150">
                        <template slot-scope="scope">
                            <el-input
                                v-model="scope.row.name"
                                :disabled="isView"
                                placeholder="请输入姓名"
                                size="medium"
                                class="table-input">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="部门" prop="department" align="center" min-width="150">
                        <template slot-scope="scope">
                            <el-input
                                v-model="scope.row.department"
                                :disabled="isView"
                                placeholder="请输入部门"
                                size="medium"
                                class="table-input">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="工号" prop="employeeId" align="center" min-width="150">
                        <template slot-scope="scope">
                            <el-input
                                v-model="scope.row.employeeId"
                                :disabled="isView"
                                placeholder="请输入工号"
                                size="medium"
                                class="table-input">
                            </el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
    </div>
</template>

<script>
import { getTrainingSignInById, saveTrainingSignIn } from '@/api/trainingIn'
import { formatDateTime, formatDate } from '@/utils/date'

export default {
  data() {
    return {
      id: undefined,
      isView: false,
      trainingTime: '',
      trainingLocation: '',
      employees: [
        { name: '', department: '', employeeId: '' }
      ],
      selectedIndices: []
    }
  },
  created() {
    const { id, type } = this.$route.query
    if (id) {
      if(type === 'view'){    
        this.isView = true
      }else if(type === 'edit'){
        this.isView = false
      }
      this.id = id
      this.getDetail()
    }
  },
  methods: {
    async getDetail() {
      try {
        const data = await getTrainingSignInById(this.id)
        this.trainingTime = formatDateTime(data.data.trainingTime)
        this.trainingLocation = data.data.trainingLocation
        this.employees = data.data.employees || []
      } catch (error) {
        console.error('获取详情失败', error)
      }
    },
    async saveData() {
      if (!this.trainingTime || !this.trainingLocation) {
        this.$message.error('培训时间和地点不能为空')
        return
      }

      if (!this.employees.length) {
        this.$message.error('至少需要一条签到记录')
        return
      }

      if (this.employees.some(emp => !emp.name || !emp.department || !emp.employeeId)) {
        this.$message.error('签到人员信息不能为空')
        return
      }

      try {
        await saveTrainingSignIn({
          id: this.id,
          trainingTime: formatDateTime(this.trainingTime)   ,
          trainingLocation: this.trainingLocation,
          employees: this.employees
        })
        this.$message.success('保存成功')
        this.$router.push('/main/biao/gsqiandaoList')
      } catch (error) {
        console.error('保存失败', error)
      }
    },
    addEmployee() {
      this.employees.push({
        name: '',
        department: '',
        employeeId: ''
      })
    },
    handleSelectionChange(selection) {
      this.selectedIndices = selection.map(item => this.employees.indexOf(item))
    },
    deleteSelected() {
      if (this.selectedIndices.length === 0) {
        this.$message.warning('请选择要删除的记录')
        return
      }
      this.employees = this.employees.filter((_, index) => !this.selectedIndices.includes(index))
      this.selectedIndices = []
    },
    goToList() {
      this.$router.push('/main/biao/gsqiandaoList')
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
    min-height: 100vh;
    padding: 24px;
    // background: linear-gradient(to bottom, #f8f9fa, #ffffff);
    max-width: 1200px;
    margin: 0 auto;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 16px 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

    .header-left, .header-right {
        // min-width: 160px;
    }

    .header-content {
        text-align: center;

        .title {
            margin: 0;
            color: #2c3e50;
            font-size: 22px;
            font-weight: 600;
        }

        .subtitle {
            display: block;
            margin-top: 8px;
            color: #909399;
            font-size: 14px;
        }
    }
}

.back-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #606266;
    font-size: 14px;
    transition: all 0.3s ease;

    i {
        margin-right: 4px;
    }

    &:hover {
        color: #409EFF;
        transform: translateX(-2px);
    }
}

.action-group {
    .el-button {
        padding: 10px 20px;
        font-weight: 500;

        i {
            margin-right: 6px;
        }

        &:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
    }
}

.content {
    .info-card {
        margin-bottom: 20px;
        
        .info-section {
            .info-row {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                padding: 0;
            }

            .info-item {
                display: flex;
                align-items: center;
                flex: 1;
                min-width: 280px;

                .label {
                    width: 90px;
                }

                .value {
                    color: #303133;
                    font-size: 14px;

                    &.highlight {
                        color: #409EFF;
                        font-weight: 500;
                    }
                }
            }
        }
    }
}

.table-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

    .card-header {
        padding: 16px 20px;
        border-bottom: 1px solid #ebeef5;
        background: #f8f9fa;

        .header-title {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
        }

        .header-subtitle {
            margin-left: 8px;
            font-size: 13px;
            color: #909399;
        }
    }
}

.custom-date-picker {
    width: 180px;
}

.custom-input {
    width: 180px;
}

.table-input {
    :deep(.el-input__inner) {
        border-radius: 4px;
        
        &:hover {
            border-color: #c0c4cc;
        }
        
        &:focus {
            border-color: #409EFF;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
        }
    }
}

:deep(.el-table) {
    border-radius: 0 0 8px 8px;
    overflow: hidden;

    &::before {
        display: none;
    }

    th {
        background-color: #f8f9fa !important;
        color: #606266;
        font-weight: 600;
        padding: 12px 0;
    }

    td {
        padding: 12px 0;
    }

    .el-table__row:hover {
        td {
            background-color: #f5f7fa;
        }
    }
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
    .detail-container {
        padding: 16px;
        margin: 0 16px;
    }

    .page-header {
        padding: 12px 16px;
    }

    .info-section {
        .info-item {
            min-width: 100% !important;
        }
    }

    .custom-date-picker,
    .custom-input {
        width: 100% !important;
    }
}
</style>